<template>
	<div class="body">
		<div class="login">
			<div class="title">
				信易加后台管理系统
			</div>
			<div class="form">
				<div class="row">
					<User class="icon" />
					<el-input v-model="form.userName.value" placeholder="请输入用户名" maxlength="8" clearable />
				</div>
				<div class="error">
					<label>
					  {{form.userName.msg}}
					</label>
				</div>
			</div>
			<div class="form">
				<div class="row">
					<Lock class="icon"/>
					<el-input v-model="form.password.value" placeholder="请输入密码" maxlength="8" clearable />
				</div>
				<div class="error">
					<label>
					  {{form.password.msg}}
					</label>
				</div>
			</div>
			<el-button :loading="flag" :disabled="flag" class="loginBtn" type="primary" @click="login()">登录</el-button>
		</div>
	</div>
</template>

<script>
	import {User, Lock} from '@element-plus/icons-vue'
	import { mapActions } from 'vuex'
	import { ElNotification } from 'element-plus'
	
	export default{
		
		//数据模型
		data(){
		  return {
		    //表单
		    form: {
		      userName: {value:'', msg:''},
		      password: {value:'', msg:''},
		    },
			//按钮是否禁用
			flag: false
		  }
		},
		 
		//方法
		methods: {
			
			//映射
			...mapActions('sysUser', ['sysLogin']),

			//登录操作
			async login(){
				if(! this.form.userName.value){
					this.form.userName.msg = "用户名不可为空！"
					return
				}
				if(! this.form.password.value){
					this.form.password.msg = "密码不可为空！"
					this.form.userName.msg = ""
					return
				}
				this.form.password.msg = ""
				//注册需要访问接口等结果，要时间的
				//按钮锁掉，不让重复点击
				this.flag = true

				const res =	await this.sysLogin({
								userName: this.form.userName.value,
								password: this.form.password.value
							})
				if(res.successful){
					//成功：实现登录状态
					let token = res.data.tokenHead + res.data.accessToken
					//本地持久化记录：提供下次打开实现自动登录
					window.localStorage.setItem('token', token)
					//跳转至主页
					this.$router.replace('/home')
				}else{
					//失败
					ElNotification({
					  title: '信易加后台管理系统',
					  message: '用户名或密码错误',
					  type: 'error'
					})
					this.flag=false
				}
			}

		},
		
		//挂载组件
		components: {
		  User,
		  Lock
		},
		
		//在挂载开始之前被调用
		//判断是否有token，如果有，查询用户具体信息并且存入storage并直接跳转至主页
		beforeMount() {
			let token = window.localStorage.getItem('token')
			if(token){
				//跳转至主页
				this.$router.replace('/home')
			}
		}
	}
	

</script>

<style scoped>
	.body {
		position: relative; /* 确保子元素可以相对于此元素定位，虽然对于背景图片不是必需的 */
		background-color: #1891ff;
		width: 100%;
		height: 100vh; /* 使容器占据整个视口高度 */
		margin: 0;
		padding: 0;
		background-image: url("../assets/bg.png"); /* 背景图片路径 */
		background-repeat: no-repeat; /* 防止背景图片重复 */
		background-position: right bottom; /* 将背景图片定位在右下角 */
		background-size: auto; /* 或者你想要的背景图片尺寸 */
		display: flex;
		justify-content: center;
	}
	.login{
		width: 400px;
		height: 450px;
		background-color: #fff;
		border-radius: 10px;
		margin-top: 200px;
		padding-top: 80px;

		box-sizing: border-box;
	}
	.title{
		font-size: 25px;
		font-weight: bolder;
		margin-bottom: 50px;		
		display: flex;
		justify-content: center;
	}
	
	.row{
		width: 320px;
		height: 40px;
		border: 1px solid #cccccc;
		margin: 0 0 5px 40px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 10px 0 10px;
	}
	.icon{
		width: 24px;
		height: 24px;
		color: #cccccc;
	}
	.row.focused {
	  border-color: #26b3ff; /* 聚焦时边框颜色变为蓝色 */
	}
	
	.loginBtn{
		width: 320px;
		height: 40px;
		margin-left: 40px;
		border-radius: 10px;
		color: #fff;
		font-size: 18px;
		font-weight: bolder;
		letter-spacing: 60px;
		padding-left: 60px;
	}
	.error{
		color: #d71518;
		font-size: 12px;
		margin: 0 0 20px 40px;
		padding-left: 47px;
	}
	.form{
		height: 65px;
	}


</style>